<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<div class="container-fluid" id="app">
    <div class="row pt-2">
        <div class="col-1 text-end">原文：</div>
        <div class="col"><textarea class="form-control form-control-sm" style="resize:none;" v-model="strNative" rows="12"></textarea></div>
    </div>
    <div class="row mt-3">
        <div class="col-1"></div>
        <div class="col-2">
            <select class="form-select form-select-sm" v-model="digest" @change="selChange">
                <option v-for="(d, i) in digests" :value="d.name">{{d.title}}</option>
            </select>
        </div>
        <div class="col" v-show="keyShow">
            <input type="text" class="form-control form-control-sm" placeholder="密钥，非必须" v-model="key">
        </div>
        <div class="col-2 text-end">
            <button type="button" class="btn btn-primary btn-sm text-nowrap" style="width:100px;" @click="encode">计&nbsp;&nbsp;算</button>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-1 text-end text-nowrap">密文：</div>
        <div class="col"><textarea class="form-control form-control-sm" style="resize:none;" v-model="strCypher" rows="5"></textarea></div>
    </div>
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/crypto-js/crypto-js.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script>
const app = {
    data() {
        return {
            digests: [
                {name: 'md5', title: 'MD5', key: 0},
                {name: 'sha1', title: 'SHA1', key: 0},
                {name: 'sha224', title: 'SHA224', key: 0},
                {name: 'sha256', title: 'SHA256', key: 0},
                {name: 'sha384', title: 'SHA384', key: 0},
                {name: 'sha512', title: 'SHA512', key: 0},
                {name: 'ripemd160', title: 'RIPEMD-160', key: 0},
                {name: 'hmac-md5', title: 'Hmac-MD5', key: 1},
                {name: 'hmac-sha1', title: 'Hmac-SHA1', key: 1},
                {name: 'hmac-sha224', title: 'Hmac-SHA224', key: 1},
                {name: 'hmac-sha256', title: 'Hmac-SHA256', key: 1},
                {name: 'hmac-sha384', title: 'Hmac-SHA384', key: 1},
                {name: 'hmac-sha512', title: 'Hmac-SHA512', key: 1}
            ],
            digest: 'md5',
            keyShow: false,
            key: '',
            strNative: '',
            strCypher: ''
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    methods: {
        selChange() {
            console.info(this.digest)
            let d = getDigest(this.digests, this.digest)
            if(1 == d.key) this.keyShow = true;
            else this.keyShow = false;
        },
        encode() {
            switch (this.digest) {
                case 'md5':
                    this.strCypher = CryptoJS.MD5(this.strNative)
                    break;
                case 'sha1':
                    this.strCypher = CryptoJS.SHA1(this.strNative)
                    break;
                case 'sha224':
                    this.strCypher = CryptoJS.SHA224(this.strNative)
                    break;
                case 'sha256':
                    this.strCypher = CryptoJS.SHA256(this.strNative)
                    break;
                case 'sha384':
                    this.strCypher = CryptoJS.SHA384(this.strNative)
                    break;
                case 'sha512':
                    this.strCypher = CryptoJS.SHA512(this.strNative)
                    break;
                case 'ripemd160':
                    this.strCypher = CryptoJS.RIPEMD160(this.strNative)
                    break;
                case 'hmac-md5':
                    this.strCypher = CryptoJS.HmacMD5(this.strNative, this.key)
                    break;
                case 'hmac-sha1':
                    this.strCypher = CryptoJS.HmacSHA1(this.strNative, this.key)
                    break;
                case 'hmac-sha224':
                    this.strCypher = CryptoJS.HmacSHA224(this.strNative, this.key)
                    break;
                case 'hmac-sha256':
                    this.strCypher = CryptoJS.HmacSHA256(this.strNative, this.key)
                    break;
                case 'hmac-sha384':
                    this.strCypher = CryptoJS.HmacSHA384(this.strNative, this.key)
                    break;
                case 'hmac-sha512':
                    this.strCypher = CryptoJS.HmacSHA512(this.strNative, this.key)
                    break;
                default:
                    break;
            }
        }
    }
}
Vue.createApp(app).mount('#app');

function getDigest(digests, name) {
    let d = '';
    for(let digest of digests) {
        if(name == digest.name) {
            d = digest;
            break;
        }
    }
    return d;
}
</script>